<template>
  <div class="hazard">
    <haz-tree-history @selected="categoryCheckHandler"/>
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;height: 30px;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
           <div class="ha-top">
              <div class="radio-t">
                 <el-button type="primary" icon="el-icon-download" size="mini" plain @click="handleDownExcel"
                             >清单下载</el-button>
              </div>
            </div>
        </div>
        <template v-if="columns && columns.length > 0">
            <dynamic-data-table ref="dataTable"
                :api="getTableData"
                :options="options"
                :columns="columns"
                :operates="operates"
                :query="models.selectFormModel"
                @handle-selection-change="handleSelectionChange"/>
          </template>
        <el-empty description="暂无数据" v-else/>
      </el-card>
    </div>
    <common-dialog :options="exportOptions"  ref="exportDialog" @downloadHandler="downloadHandler"/>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Ref} from 'vue-property-decorator';
import HazTreeHistory from "@/views/quality/components/HazTreeHistory.vue";
import NTab from "@/components/NTab.vue";
import DynamicDataTable from "@/components/DataTable/DynamicDataTable.vue";
import {getUserList} from "@/api/user";
import {getRecycleTitle,getHistoryList} from '@/api/dataSearch';
import {userTreeSelectData} from '@/api/areaManager';
import CommonDialog from '@/views/quality/components/CommonDialog.vue';
import {downloadData} from '@/api/investDataCommon'

@Component({
  methods: {getUserList},
  components: {DynamicDataTable, HazTreeHistory,NTab,CommonDialog}
})
export default class history extends Vue {

  @Ref('dataTable') dataTable!:any;
  @Ref('areaTreeSelect') areaTreeSelect!:any;
  @Ref('exportDialog') exportDialog;

  private getTableData = getHistoryList;
  tabItem!:any;

  models:any={
    selectFormModel:{
      categoryId:'',
      bigCategoryId:'',
      midCategoryId:'',
      structureId:'',
      prepareStatus:'',
      searchStatus:'0',
      workName:'',
      categoryName:'',
      workId:'',
      areaId:'',
      id:''
    }
  }
  columns: any =[];
  tabOptions:any=[{label:'历史数据',status:'0'}]

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };

    exportOptions:any={
     title:'',
     dialogVisible:false,
     workId:'',
     backendVerify:true,
     structureId:''
  }

  dialog: any = {
    dialogFormVisible: false,
    dialogImportVisible: false,
    isEdit: false,
    isBatchEditDisabled: true,
    isBatchRemoveDisabled: true,
    selectParams: {
      clearable: true,
      placeholder: '请选择'
    },
    areaTreeParams: {
      clickParent: true,
      filterable: true,
      accordion: true,
      defaultExpandAll:true,
      data: [],
      props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
        value: 'id'
      }
    }
  };


  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [

            {
               // label: '查看',
                type: 'primary',
                icon: 'el-icon-search',
                disabled: () => {
                    return false;
                },
                permission: 'bus:data:view',
                method: (index, row) => {
                    this.handleView(index, row);
                },
                plain:true,
                tooltip:'查看调查对象'
            },
            {
               // label: '查看',
                type: 'primary',
                icon: 'el-icon-edit',
                disabled: () => {
                    return false;
                },
                visibled:(index, row)=>{
                    return row.historyId == -1 ? true : false;
                },
                permission: 'bus:history:edit',
                method: (index, row) => {
                    this.handleEdit(index, row);
                },
                plain:true,
                tooltip:'修改历史数据'
            }
    ]
  };

  handleView(index: number, row: any) {

      this.$router.push({ path: '/quality/surveyView', query: { dataId: row.id, structureId: row.structureId}});
  }

  handleEdit(index: number, row: any) {
     this.models.selectFormModel.id = row.id;
     this.$router.push({ path: '/quality/surveyAdd', query: this.models.selectFormModel});
  }

  tabCheckHandler(data){
    this.tabItem = data.item;
    this.models.selectFormModel.searchStatus = data.item.status;
    this.dataStatusChangeHandler('1');
  }

   handleDownExcel(){
    if(!this.models.selectFormModel.categoryId){
        this.$message("请选择类别");
        return;
    }
    this.exportOptions.dialogVisible = true;
    this.exportDialog.exportParamProcess();
   
  }

  
  downloadHandler(models:any){
    if(models){
      const dataProps = {
        common:{
          head: models.common.headOptions.checkedValues,
          code: models.common.codeOptions.checkedValues,
          end:  models.common.endOptions.checkedValues
        },
        commonExt:{
          head:models.commonExt.headOptions.checkedValues,
          code:models.commonExt.codeOptions.checkedValues,
          end:models.commonExt.endOptions.checkedValues
        },
        dynamic:{
          head:models.dynamic.headOptions.checkedValues,
          code:models.dynamic.codeOptions.checkedValues,
          end:models.dynamic.endOptions.checkedValues
        },
      };
      this.models.selectFormModel.dataProps = dataProps;
    }
     
    this.downExcel();
  }

   downExcel(){
    downloadData(this.models.selectFormModel).then(res => {
      if (res && res.data) {
        (this as any).$download(res.data.fileName);
      }
    }).catch((e) => {
      console.error(e);
    });
  }

  areaSelectHandler(val){
    this.dataStatusChangeHandler('1');
  }

  getTitle(structureId?){
    if(structureId){
      getRecycleTitle({id:structureId}).then(res =>{
        this.columns = res.data;
        this.dataStatusChangeHandler('1');
    })
    }else{
      getRecycleTitle().then(res =>{
        this.columns = res.data;
        this.dataStatusChangeHandler('1');
    })
    }
  }

  dataStatusChangeHandler(val){
    if(this.dataTable){
            this.dataTable.refresh();
    }
  }

  categoryCheckHandler(data){
  
    this.models.selectFormModel.workId =  data.rootId;
     this.exportOptions.workId = data.rootId;
    if(data.code){
        this.getTitle(data.code);
        this.models.selectFormModel.categoryId = data.id;
        this.models.selectFormModel.structureId = data.code;
        this.exportOptions.structureId = data.code;
  
        this.models.selectFormModel.categoryName = data.label;
        this.models.selectFormModel.polygon = data.polygon;
        this.models.selectFormModel.workName = data.rootName;
    }else{
        this.models.selectFormModel.workName = data.rootName;
        this.models.selectFormModel.categoryName = data.label;
        this.models.upload.id=null;
        this.models.selectFormModel.structureId = null;
        this.models.selectFormModel.categoryId = null;
        if(data.level == 2){
          this.models.selectFormModel.midCategoryId =data.id;
          this.models.selectFormModel.bigCategoryId= null;
   
        }else if(data.level == 1){
          this.models.selectFormModel.bigCategoryId =data.id;

          this.models.selectFormModel.midCategoryId =null;
        }else{
          this.models.selectFormModel.workId = data.id;
          this.models.selectFormModel.bigCategoryId =null;
          this.models.selectFormModel.midCategoryId =null;
        }
        this.getTitle();
    }
  }
  private handleSelectionChange(val) {
    console.log(val);
  }

  mounted(){
    this.tabItem = this.tabOptions[0];
    userTreeSelectData().then(res =>{
        if(this.areaTreeSelect){
            this.areaTreeSelect.treeDataUpdateFun(res.data);
        }else{
          this.dialog.areaTreeParams.data = res.data;
        }

    }).catch(e =>{
      console.error(e);
    })
  }
}
</script>
<style lang="scss" scoped>
.hazard{
  display: flex;
  gap: 2px;
  .ha-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .radio-t{
      display: flex;
      align-items: center;
      gap: 6px;
      span{
        font-size: 14px;
      }
    }
  }
}
.el-tree-select {
    height: 30px !important; /* 调整为你需要的高度 */
    input{
      height: 30px !important; /* 调整为你需要的高度 */
    }
}
.el-input__inner{
  height: 30px !important; /* 调整为你需要的高度 */
}

::v-deep .el-card .el-card__header {
    padding: 6px 10px !important;
}
::v-deep .el-card__body {
    padding: 0px 5px 0px 5px !important;
}

::v-deep .el-table tr:nth-child(odd) { background: #f5f5f5; }
::v-deep .el-table tr:nth-child(even) { background: #e0e0e0; }
/* 悬停效果 */
::v-deep .el-table__body tr:hover > td { background: #f5f7fa !important; }
/* 选中行 */
::v-deep .el-table__body tr.current-row > td { background: #f0f5ff; }

::v-deep .el-table th {
  background-color: #5c9e90 !important; /* 背景色 */
  color: #000 !important;               /* 文字颜色 */
  font-size: 14px;                     /* 字体大小 */
  border-bottom: 1px solid #EBEEF5;    /* 底部边框 */
}
</style>
